<template lang="pug">
  .panel
    a.delete(v-if="canDel" href="javascript:void(0)" @click="$emit('delContact', info.id)")
      i(class="el-icon-close")
    form-box(
      ref="contactForm"
      :fields="fields"
      :showBtns="false"
      size="mini"
      labelWidth="126px"
      :formProps="basicFormProps"
    )
</template>
<script>
import { regs } from '@/utils/validate'

export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    canDel: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'add',
      type: String
    }
  },
  computed: {
    basicFormProps () {
      return {
        disabled: this.type === 'view',
        inline: true
      }
    },
    fields () {
      const { info } = this
      return [
        {
          key: 'name',
          label: '家长姓名',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        },
        {
          key: 'relation',
          label: '关系',
          initialValue: info.relation,
          rules: [{ required: true, message: '请输入' }],
          type: 'select',
          fieldProps: {
            dictKey: 'relationships',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          key: 'phone',
          label: '联系电话',
          initialValue: info.phone,
          rules: [{ pattern: regs.phone, message: '请输入正确手机号码' }, { required: true, message: '请输入' }]
        },
        {
          key: 'degree',
          label: '学历',
          initialValue: info.degree,
          type: 'select',
          fieldProps: {
            dictKey: 'educations',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          key: 'company',
          label: '工作单位',
          initialValue: info.company
        },
        {
          key: 'duty',
          label: '职位',
          initialValue: info.duty
        },
        {
          key: 'email',
          label: '邮箱',
          initialValue: info.email
        },
        {
          key: 'homeAddress',
          label: '家庭住址',
          initialValue: info.homeAddress
        },
        {
          key: 'remark',
          label: '备注',
          initialValue: info.remark
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.panel{
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid $--border-color-lighter;
  padding: 12px;
  position: relative;

  + .panel{
    margin-top: 10px
  }

  > .delete{
    position: absolute;
    right: 5px;
    top: 0
  }
}
</style>
